<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useGetManAgreementMetaPage } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { ElCard } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { useRouter } from 'vue-router'

import { agreementStateOptions, agreementTypeOptions } from './constant'
import Edit from './edit.vue'
import { filterLabel } from './heler'

const { push } = useRouter()

const id = ref('')
const visible = ref(false)

const form = ref({
    agreementCode: '',
    agreementName: '',
    agreementState: '',
    agreementType: '',
    partyA: '',
    partyB: '',
})
const defaultForm = cloneDeep(form.value)
const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'agreementCode', title: '协议编号' },
        { field: 'agreementName', title: '协议名称' },
        { field: 'agreementType', slots: { default: 'agreementType' }, title: '协议类型' },
        { field: 'categoryName', title: '协议类目' },
        { field: 'partyA', title: '甲方' },
        { field: 'partyB', title: '乙方' },
        { field: 'endDate', title: '协议到期日' },
        { field: 'agreementState', slots: { default: 'agreementState' }, title: '协议状态' },
        { slots: { default: 'operate' }, title: '操作', width: 100 },
    ],
    data: [],
    height: 500,
})
const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const searchParams = computed(() => {
    return {
        agreementCode: form.value.agreementCode,
        agreementName: form.value.agreementName,
        agreementState: form.value.agreementState,
        agreementType: form.value.agreementType,
        page: tablePage.value.currentPage,
        partyA: form.value.partyA,
        partyB: form.value.partyB,
        size: tablePage.value.pageSize,
    }
})
const { data, isLoading } = useGetManAgreementMetaPage(searchParams)
const columns = [
    {
        colProps: {
            span: 8,
        },
        label: '状态',
        options: agreementStateOptions,
        prop: 'agreementState',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '协议类型',
        options: agreementTypeOptions,
        prop: 'agreementType',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '协议编号',
        prop: 'agreementCode',
    },
    {
        colProps: {
            span: 8,
        },
        label: '协议名称',
        prop: 'agreementName',
    },
    {
        colProps: {
            span: 8,
        },
        label: '甲方',
        prop: 'partyA',
    },
    {
        colProps: {
            span: 8,
        },
        label: '乙方',
        prop: 'partyB',
    },
]
function search(val: any) {
    form.value = {
        ...val,
    }
}
function reset() {
    form.value = defaultForm
    tablePage.value.currentPage = 1
}

function goShow(row: any) {
    push(`/operations-pages/strategic-agreement/protocol-show/${row.id}`)
}

watchEffect(() => {
    if (data.value) {
        gridOptions.data = cloneDeep(data.value?.records ?? [])
        tablePage.value.total = data.value?.total ?? 0
    }
})
</script>

<template>
    <ElCard shadow="never">
        <SearchForm v-bind="form"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="search"
                    @reset="reset"
        />

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
        >
            <template #agreementType="{ row }">
                {{ filterLabel(agreementTypeOptions, row.agreementType) }}
            </template>

            <template #agreementState="{ row }">
                {{ filterLabel(agreementStateOptions, row.agreementState) }}
            </template>

            <template #operate="{ row }">
                <div class="text-#dA0004 flex gap-15 justify-center">
                    <span class="cursor-pointer"
                          @click="goShow(row)"
                    >
                        查看
                    </span>
                    <!--
                    <span class="cursor-pointer"
                          @click="showEdit(row)"
                    >
                        编辑
                    </span> -->
                </div>
            </template>
        </SearchTable>
    </ElCard>

    <Edit v-model:id="id"
          v-model:visible="visible"
    />
</template>
